<template>
    <div class="login-container">
        <div class="left">
            <div class="logo-banner">
                <div class="logo bold">SHENGDI</div>
                <div class="logo_text bold">
                    <div>晟</div>
                    <div>迪</div>
                    <div>建</div>
                    <div>筑</div>
                    <div>设</div>
                    <div>计</div>
                </div>
            </div>
            <div class="l-s-5" style="font-size: 20px;">欢迎使用</div>
            <div class="l-s-5 bold" style="font-size: 26px;">系统管理后台</div>
        </div>
        <div class="right">
            <el-card style="width: 480px">
                <template #header>
                    <div class="bold t-l-c">用户登录</div>
                </template>
                <el-form ref="ruleFormRef" :model="form" :rules="loginRules" label-width="auto" label-position="top" hide-required-asterisk>
                    <el-form-item prop="loginName" label="账号">
                        <el-input v-model="form.loginName" placeholder="请输入" size="large" :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="loginPwd" label="密码">
                        <el-input @keyup.enter="toLogin" v-model="form.loginPwd" type="password" show-password placeholder="请输入" size="large"
                            :prefix-icon="Lock" />
                    </el-form-item>
                    <el-form-item >
                        <el-checkbox label="记住密码" v-model="rememberpwd" />
                    </el-form-item>
                    <div>
                        <el-button type="primary" :loading="loading" size="large" style="width: 100%;" @click="toLogin">登 录</el-button>
                    </div>
                </el-form>
            </el-card>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import useUserStore from "@/stores/modules/user";

interface LoginForm {
    loginName?: string;
    loginPwd?: string;
}
const test = ref(1)
const userStore = useUserStore();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const form = ref<LoginForm>({});
const rememberpwd = ref<boolean>(true);
const loading = ref<boolean>(false);
const loginRules = ref<FormRules>({
    loginName: [
        {
            required: true,
            trigger: "blur",
            message: '账号不能为空',
        },
    ],
    loginPwd: [
        {
            required: true,
            trigger: "blur",
            message: '密码不能为空',
        },
        {
            min: 6,
            message: '密码不能少于6位',
            trigger: "blur",
        },
    ]
})

const toLogin = () => {
    ruleFormRef.value.validate((isValid, invalidFields) => {
        if (isValid) {
            console.log(123223333333333333333333333333333)
            loading.value = true;
            userStore.login(form.value).then(res=>{
                router.push('/index')
            }).finally(()=>{
                loading.value = false;
            })
            // store.dispatch('dologin', { ...form.value, organId: form.value.id })111111111111111
            // router.push('/')
        } else {
            console.log('error submit!', invalidFields)
        }
    })
}
</script>
<style scoped lang="scss">
.bold {
    font-weight: bold;
}
.l-s-5{
    letter-spacing: 5px;
}
.t-l-c{
    text-align: center;
}

.login-container {
    width: 100%;
    height: 100%;
    display: flex;
    background: url("@/assets/img/login.png") no-repeat top;
    background-size: 100% 100%;

    .left {
        flex: 0 0 30%;
        background-color: #216ddfa6;
        color: white;
        padding: 20px;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .logo-banner {
            position: absolute;
            left: 40px;
            top: 50px;
            .logo {
                font-size: 28px;
                line-height: 1;
                width: 130px;
            }

            .logo_text {
                line-height: 1;
                font-size: 13px;
                width: 130px;
                display: flex;
                justify-content: space-between;

                >* {
                    font-weight: bold;
                    font-size: 12px;
                }
            }
        }

    }

    .right {
        flex: 0 0 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-card{
            padding: 50px 0 200px;
        }
    }

    :deep(.el-card__header) {
        border-bottom: none;
        font-weight: bold;
    }
}</style>
